<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>营业日报2</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="../assets/fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/tabletable.css" rel="stylesheet" />
		<link href="../assets/css/content.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.min.js"></script>
          <script src="../assets/js/respond.min.js"></script>
          <![endif]-->
		<style type="text/css">
			@media only screen and (max-width: 767px) {
				.btn-header {
					width: 80%;
					display: block;
					margin-right: 10%;
				}
				.navbar-nav-lf-ul li {
					display: inline-block;
					text-align: center;
					width: 100%;
					margin-left: 0px;
				}
			}
		</style>
	</head>

	<body>
		<!--内容区域-->
		<div class="content">
			<nav class="navbar navbar-default content-header backf1 br0 mb0" role="navigation">
				<div class="container-fluid">
					<span class="nav-title-pre"></span>
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					        <span class="sr-only">Toggle navigation</span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					    </button>

						<a class="navbar-brand" href="#">营业日报</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<li class="text-center">
								<button type="button" class="btn btn-info btn-header">返回</button>
							</li>
							<li>
								<button type="button" class="btn btn-info btn-header">经营分析</button>
							</li>
							<li>
								<button type="button" class="btn btn-info btn-header">餐厅实况</button>
							</li>
						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
			<div class="content_serach row">
				<div class="modal_header_time">
					<span class="modal_header_time_lf top0"><i class="iconfont icon-xiangzuo1"></i></span>
					<span class="modal_header_time_rt top0"><i class="iconfont icon-xiangyou1"></i></span>
					<input type="text" name="" class="modal_header_input ml0  mt0 mt-10" value="2016-12-16">
				</div>
				<div class="modal_header_serach">
					<button type="button" class="btn btn-info serach_btn mt0 mt-10 ml0">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
				</div>
				<dic class="clear"></dic>
			</div>
			<div class="szmd mt20">
				<span>大圣烧烤门店</span>
				<span>2016-12-20</span>
				<span>营业周报</span>
			</div>
			<div class="mt10">
				<div class="total-1">
					<span>总金额：8903333333元</span>
					<span>菜数：8900份</span>
					<span>桌数：890</span>
				</div>
				<div class="total-1">
					<span>人数：890人</span>
					<span>人均：890.00元</span>
					<span>桌均：890.99元</span>
				</div>
			</div>
			<div class="table-responsive mt20">
				<table class="table">
					<thead class="tablethead">
						<tr>
							<th class="firstth" valign="middle">序号</th>
							<th class="secondta">门店</th>
							<th>营业额</th>
							<th>人数</th>
							<th>人均</th>
							<th>桌数</th>
							<th>桌均</th>
							<th>上座率</th>
						</tr>
					</thead>
					<tbody class="mytable">
						<tr>
							<td class="firsttd" valign="middle">01</td>
							<td class="secondta">你好，大圣烧烤</td>
							<td>11223</td>
							<td>190</td>
							<td>290</td>
							<td>100</td>
							<td>100</td>
							<td>120%</td>
						</tr>
						<tr>
							<td class="firsttd" valign="middle">01</td>
							<td class="secondta">你好，大圣烧烤</td>
							<td>11223</td>
							<td>190</td>
							<td>290</td>
							<td>100</td>
							<td>100</td>
							<td>120%</td>
						</tr>
						<tr>
							<td class="firsttd" valign="middle">01</td>
							<td class="secondta">你好，大圣烧烤</td>
							<td>11223</td>
							<td>190</td>
							<td>290</td>
							<td>100</td>
							<td>100</td>
							<td>120%</td>
						</tr>
						<tr>
							<td class="firsttd" valign="middle">01</td>
							<td class="secondta">你好，大圣烧烤</td>
							<td>11223</td>
							<td>190</td>
							<td>290</td>
							<td>100</td>
							<td>100</td>
							<td>120%</td>
						</tr>
						<tr>
							<td class="firsttd" valign="middle">01</td>
							<td class="secondta">你好，大圣烧烤</td>
							<td>11223</td>
							<td>190</td>
							<td>290</td>
							<td>100</td>
							<td>100</td>
							<td>120%</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
				<div class="page-page flr">
					<ul class="pagination">
						<li class="epage">
							<a href="#">上一页</a>
						</li>
						<li class="active">
							<a href="#">1 <span class="sr-only">(current)</span></a>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">3</a>
						</li>
						<!--<li><a href="#">4</a></li>-->
						<li>
							<a href="#">...</a>
						</li>
						<li class="epage">
							<a href="#">下一页</a>
						</li>
					</ul>
				</div>
				<div class="page-num flr">共9页，每页10条</div>
			</div>
		</div>
		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			colorStyle();
			// 给奇数行和偶数行不同的颜色
			function colorStyle() {
				$(".mytable").find("tr:even").addClass("oushu");
				$(".mytable").find("tr:odd").addClass("jishu");
				$(".mytable").find("tr:odd td:first-child").addClass("jishu");
			}

			// 给第一列高度
			firstTrHeight()

			function firstTrHeight() {
				for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
					var trht = $(".mytable tr")[i].offsetHeight
					var domtr = $(".mytable tr")[i];
					// 有30px的边距
					$(domtr).children('td').height(trht - 30);
					$(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
				};
			}

			function checks(obj) {
				if($(obj).hasClass("checkno")) {
					$(obj).removeClass("checkno");
					$(obj).addClass("checkyes");
				} else {
					$(obj).addClass("checkno");
					$(obj).removeClass("checkyes");
				}
			}

			function status(obj) {
				if($(obj).hasClass("enable")) {
					$(obj).removeClass("enable");
					$(obj).addClass("disable");
				} else {
					$(obj).addClass("enable");
					$(obj).removeClass("disable");
				}
			}
		</script>
	</body>

</html>